<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>获取事件和事件目标</title>
</head>
<body>

    <h3>获取事件和事件目标</h3>

    <script type="text/javascript">
        var x = {
            first: function(){
                // 比较适合IE8及其之前版本(同样也适用于Chrome和FireFox)
                var event = window.event ;
                if( !event ) {
                    // 以下操作适用于 Chrome 、FireFox 、IE 9 之后版本
                    console.log( '通过函数参数获取事件对象' );
                    // 再非严格模式下通过 arguments 的 callee 可以获得函数本身
                    var self = arguments.callee ;
                    var caller ;
                    var fn = self ;
                    while( fn ) {
                        caller = fn ;
                        fn = fn.caller ;
                    }
                    event = caller.arguments[ 0 ];
                }
                console.log( event );

                // 获取事件目标
                // event.target 适用于现代浏览器( Chrome 、FireFox 、IE 8 + )
                // event.srcElement 适用于 IE 8 之前版本 ( 其它浏览器实际也是兼容的 ) 
                var target = event.target || event.srcElement ;
                console.log( target );
            },
            hello: function(){
                this.first();
            }
        }
    </script>

    <!-- 当点击事件发生时会首先调用 onclick 函数，再由 onclick 调用 hello  -->
    <button class="first" onclick="x.hello()">HTML事件处理</button>
    
    <button class="second" id="second">DOM 0 事件处理</button>
    
    <script type="text/javascript">
        var s = document.getElementById( 'second' );
        s.onclick = function( e ) {
            var event = e || window.event ;
            console.log( event );
            var target = event.target || event.srcElement ;
            console.log( target );
        }
    </script>

    <button class="third" id="third">DOM 2 事件处理</button>

    <script type="text/javascript">
        var t = document.getElementById( 'third' );

        var type = 'click' ;
        function handler(e){
            var event = e || window.event ;
            var target = event.target || event.srcElement ;
            console.log( target );
        }

        if( t.addEventListener ) {
            // 支持DOM2标准的浏览器适用
            t.addEventListener( type , handler , false );
        } else if( t.attachEvent ){
            // IE 早期版本适用
            t.attachEvent( 'on' + type , handler );
        } else {
            t.onclick = handler ;
        }
    </script>


    
</body>
</html>